<div class="signup window">
<h2>Sign up</h2>
<form id="signup-form" method="post" action="ajax/action.php">
<label>Username</label>
<input type="text" maxlength="20" class="uname" />
<label>Password</label>
<input type="password" maxlength="20" class="pass" />
<label>email</label>
<input type="text" maxlength="30" class="email" />
<input type="submit" value="Sign up!"/>
</form>
</div>
<script type="text/javascript">
var pattern = new Object ();
pattern.uname=/^([a-z]|[A-Z]|[0-9])*$/;
pattern.email=/^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$/;
$("form input").focus(function () {
	if ($(this).hasClass("invalid")) {
		$(this).select();
		$(this).removeClass("invalid");
	}
});

$("form .uname").blur(function () {
	var v=$(this).val(), regexp=pattern.uname.test(v);
	if (!regexp) {
		$(this).addClass("invalid");
		displayError("Your username should contain only English alphanumeric characters.", {
			"appendTo" : ".signup.window",
			"onDisappear" : function () {
				$.colorbox.resize();
			}
		});
		$.colorbox.resize();
	}
});
$("form .email").blur(function () {
	var v=$(this).val(), regexp=pattern.email.test(v);
	if (!regexp) {
		$(this).addClass("invalid");
		displayError("Please enter a valid email address.", {
			"appendTo" : ".signup.window",
			"onDisappear" : function () {
				$.colorbox.resize();
			}
		});
		$.colorbox.resize();
	}
});

$("#signup-form").submit(function (e) {
	e.preventDefault();
	if ($("#signup-form").find("input.invalid").length>0) {
		return false;
	}
	if (($(this).find(".uname").val()=="")||($(this).find(".pass").val()=="")||($(this).find(".email").val()=="")) {
		displayError("Please fill in all the fields.", {
			"appendTo" : ".signup.window",
			"onDisappear" : function () {
				$.colorbox.resize();
			}
		});
		$.colorbox.resize();
		return false;
	}
	$.post("ajax/action.php", {
		"action" : "signup",
		"uname" : $("#signup-form .uname").val(),
		"pass" : $("#signup-form .pass").val(),
		"email" : $("#signup-form .email").val()
	}, function (data) {
		if (data.successful=="true") {
			$(".signup.window").append('<div class="alert ok" style="opacity: 0">You signed up successfuly!</div>');
		}else{
			$(".signup.window").append('<div class="alert exclamation" style="opacity: 0">'+data.message+'</div>');
		}
		$.colorbox.resize();
		$(".signup.window .alert").hide().css({
			"opacity" : "1"
		}).fadeIn("300", function () {
		}).delay(1000).fadeOut("300", function () {
			$(this).remove();
			$.colorbox.resize();
			if (data.successful=="true") {
				login ($("#signup-form .uname").val());
				$.colorbox.close();
			}
		})
	});
});
</script>
